﻿
$(function () {
    $("#currentPage").val(1);
    $("#currentCount").val(0);
    $("#getMore").live('click', function () {
        var currentPage = $("#currentPage").val();
        getMoreEvents(currentPage++);
        $("#currentPage").val(currentPage);
    });
});

function getMoreEvents(page) {

    $.getJSON("/Events/GetMoreEvents",
    {
        page: page
    }, function (data) {
        debugger;
        var currentRecords = parseInt($("#currentCount").val());
        currentRecords += data.Events.length;
        $("#currentCount").val(currentRecords);
        var total = $("#totalCount").val();
        if (currentRecords >= total - 3) {
            $("#getMore").hide();
        }

        $.each(data.Events, function (i, event) {
            $("#events").append(getEventMarkup(event.EventId, event.Title, event.StartDate, event.Location, event.Description, event.Icon, event.Url)).children(':last').hide().fadeIn(2000);
        });
    });
}


function getEventMarkup(eventId, title, date, location, description, icon, url) {

    var $markup = '<div class="eventList">' +
                      '<div class="eventTitle"><img style="vertical-align:middle;" src="' + icon + '" alt="" /> <span style="vertical-align: middle;"><a href="' + url + '">' + title + '</a></span></div>' +
                      '<div class="eventDate"><span class="eventField">Date</span>: ' + date + '</div>' +
                      '<div class="eventLocation"><span class="eventField">Location</span>: ' + location + '</div>' +
                      '<div class="eventDescription">' +
                      '<span class="eventField">About the event</span><br />' +
                       description +
                      '</div>' +
                      '<div style="text-align: center;"><a href="' + url + '">View full event details</a></div>' + 
                  '</div>';

    return $markup;
}